<template>
	<view class="content">
		<view class="cont-box">
			<view class="title1">我的打卡照片</view>
			<view class="saomiao mar-t30">
				<image class="saomiao-img paizhao" v-if="photoUrl" :src="photoUrl"></image>
				<image class="saomiao-img" v-if="!photoUrl" src="/static/img/saomiao.png"></image>

			</view>
			<view class="cont-text">
				<!-- 打卡成功 -->
				<view class="success-box" v-if="userCheckInStatus===1">
					<view class="s-t1">恭喜您</view>
					<view class="s-t2">{{checkPoint.scenicName}}</view>
					<view class="s-t3">今天 14:30</view>
					<view class="s-t4">
						<u-icon name="checkmark-circle-fill" size="30px" color="#39AD22"></u-icon>
						<text class="t4-text"> 已打卡 </text>
					</view>
					<view class="s-t5">
						<text>已获得</text>
						<image class="tongqian" src="@/static/img/tongqian.png"></image>
						<text>{{checkPoint.scoure}}</text>
					</view>
				</view>

				<!-- 打卡失败 -->
				 <view v-if="userCheckInStatus==0">
					<view class="s-t6">打卡失败了</view>
					<view class="s-t7">没有拍到对应的景点</br>请重新拍照</view>
				</view>  


			</view>
			<view class="btnbox">
				<!-- <view class="btn btn1">确认打卡</view> -->
				<view class="btn btn1" @click="bindStartOver">重新拍摄打卡</view>
				<view class="btn btn2 mar-t30" @click="bindHome">返回首页</view>
			</view>
		</view>


	</view>
</template>

<script>
	import {
		orderPage

	} from '@/api/user'
import {
		userCheckIn
	} from '@/api/common'
		import {
			baseURL,
			imgURL
		} from '@/api/config'
	export default {
		components: {


		},
		data() {
			return {
				imagePath: '',
				currentLocation:{},
                photoUrl:"",	
				checkPoint:"",
				userCheckInStatus:-1
			};
		},

		onLoad(option) {
		
			console.log(option)
			if (option.imagePath) {
				this.imagePath = decodeURIComponent(option.imagePath)
			}
				this.getLocation();
		},
		onShow() {
			// await this.reset()
		},

		methods: {
			// 重新打卡
			bindStartOver(){
				uni.redirectTo({
					url:`/pages/two/scan`
				});
			},
			bindHome(){
				uni.redirectTo({
					url:`/pages/index/index`
				});
			},
			
			// 获取经纬度
									async getLocation() {
										let _this = this
										await uni.getLocation({
											type: 'gcj02',
											altitude:true,
											highAccuracyExpireTime:5000,
											isHighAccuracy:true,
											success: function(res) {
												console.log("返回：。。。。",res)
												console.log('纬度：' + res.latitude);
												console.log('经度：' + res.longitude);
												// _this.longitude = res.longitude
												// _this.latitude = res.latitude
													let currentLocation = {longitude:res.longitude,latitude:res.latitude};
											_this.imageComparison(currentLocation)
											 console.log("currentLocation=============?>>>>>",currentLocation);
											},
											fail: function(err) {
												 
												console.error('获取位置失败', err);
											}
										});
									},
									//打卡比对图片
								async	imageComparison(currentLocation){
									let imageFile=this.imagePath;
									console.log("开始比对。。。。。。。。。。。。",imageFile,currentLocation);
										let _that = this
										 console.log("currentLocation",	 currentLocation);
									let data={
										photo:imageFile,
										lon: currentLocation.longitude,
										lat: currentLocation.latitude,
										userId:1
									};
										  console.log("打卡parms",data,this.checkPoint);
										userCheckIn(data).then(res => {
											 console.log("打卡结果过",res);
											if (res.code != 200) {
												uni.$u.toast(res.msg)
												this.userCheckInStatus=0;
												return;
											}
												this.userCheckInStatus=1;
											this.checkPoint=res.data;
											const fullUrl = imageFile.startsWith('http') ? imageFile :
																						imgURL +
																						imageFile;
																					console.log('上传成功URL:', fullUrl); // 调试用 
																					// ✅ 使用上传后的URL跳转
																					 this.photoUrl=fullUrl;
										}).catch(err => {
											uni.hideLoading();
										})
									},
			getDetails() {
				orderPage({
					id: this.id
				}).then(res => {
					if (res.code == 200) {

					} else {
						uni.$u.toast(res.msg)
					}
				})
			},
		}
	};
</script>

<style scoped lang="scss">
	.content {
		height: 100vh;
		overflow-y: auto;
		box-sizing: border-box;
		background: #F6F1E5;
		padding: 30rpx;

	}

	.cont-box {
		padding: 30rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		padding-bottom: 60rpx;
		font-family: SF Pro Display, SF Pro Display;

		.title1 {
			font-weight: bold;
			font-size: 26rpx;
			color: #4C604E;
		}

		.saomiao {
			width: 630rpx;
			height: 420rpx;
			display: flex; 
			justify-content: center; 
			align-items: center; 
			overflow: hidden;


			.saomiao-img {
				width: 630rpx;
				height: 420rpx;
				border-radius: 20rpx;
			}

			.paizhao {
				object-fit: cover;
				object-position: center;
			}
		}

		.cont-text {
			width: 100%;
			height: 600rpx;
			box-sizing: border-box;
			text-align: center;
			padding-top: 70rpx;

			.success-box {
				font-family: SF Pro Display, SF Pro Display;

				.s-t1 {
					font-weight: 400;
					font-size: 36rpx;
					color: #4C604E;
				}

				.s-t2 {
					font-weight: bold;
					font-size: 60rpx;
					color: #4C604E;
					margin-top: 18rpx;
				}

				.s-t3 {
					font-weight: 400;
					font-size: 28rpx;
					color: #9E9E9E;
					margin-top: 22rpx;
				}

				.s-t4 {
					font-weight: 400;
					font-size: 40rpx;
					color: #39AD22;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-top: 30rpx;

					.t4-text {
						margin-left: 26rpx;
					}
				}

				.s-t5 {
					font-weight: 400;
					font-size: 32rpx;
					color: #4C604E;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-top: 38rpx;

					.tongqian {
						width: 40rpx;
						height: 40rpx;
						margin: 0 20rpx;
					}
				}
			}

			.s-t6 {
				font-weight: bold;
				font-size: 36rpx;
				color: #4C604E;
			}

			.s-t7 {
				font-weight: 400;
				font-size: 28rpx;
				color: #4C604E;
				margin-top: 28rpx;
			}

		}

		.btnbox {
			padding: 0 30rpx;

			.btn {
				width: 570rpx;
				height: 88rpx;
				border-radius: 120rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-weight: 400;
				font-size: 28rpx;
				box-sizing: border-box;
			}

			.btn1 {
				background: #006C04;
				color: #FFFFFF;
			}

			.btn2 {
				color: #4C604E;
				border: 2rpx solid #4C604E;
			}
		}

	}
</style>